<template>
  <div class="box">
    <div class="top-sub"></div>
    <div class="active-content">
      <div class="active-item">
        <div class="active-item-title">Affiliates</div>
        <div class="active-item-text">Earn up to 5%</div>

        <img class="active-img" src="/static/img/box/5.png" draggable="false" />
      </div>
      <div class="active-item">
        <div class="active-item-title">Free UNBOXING</div>
        <div class="active-item-text">Receive a LuckyBox</div>

        <img
          class="active-img"
          src="/static/img/box/box_icon.png"
          draggable="false"
        />
      </div>
      <div class="active-item">
        <div class="active-item-title">Add Credit</div>
        <div class="active-item-text">Up to 10% bonus</div>

        <img
          class="active-img"
          src="/static/img/box/box_icon2.png"
          draggable="false"
        />
      </div>
    </div>
    <div style="margin-top: 10px; padding: 0px 7px">
      <van-swipe :height="150" :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- <div class="notice-body">
      <div class="uni-swiper-wrapper">
        <div class="uni-swiper-slides">
          <vue-seamless-scroll
            :class-option="optionStep"
            :data="listData"
            class="item"
          >
          
            <div
              class="notice-row"
              v-for="(item, index) in listData"
              :key="index"
            >
              <img
                class="user-avatar"
                src="https://img.fcgbox.com/thumbnail/20220917/945b8c03-3982-473b-98a3-c2dad596b2b9.webp"
                draggable="false"
              />
              <div class="notice-row-name u-line-1">disingenu°</div>
              <div class="notice-row-text">winning</div>

              <img
                class="notice-row-good"
                src="https://img.fcgbox.com/hd_goods/8148.webp"
                draggable="false"
              />
            </div>
           
          </vue-seamless-scroll>
        </div>
      </div>
      <img
        class="notice-swiper-right"
        src="https://m.fcgbox.com/static/icon/home_box.webp"
        draggable="false"
      />
    </div> -->

    <div class="try-play">
      <img
        class="try-play-icon"
        src="/static/img/box/try.png"
        draggable="false"
      />
      <div>
        <div class="try-play-title">Have a Try</div>
        <div class="try-play-text">Unbox &amp; Find surprises</div>
      </div>
      <div class="try-btn">GO NOW</div>
    </div>

    <div class="classify-content">
      <div class="u-search">
        <van-search
          v-model="params.AnyWhere"
          shape="round"
          @search="search"
          placeholder="请输入搜索关键词"
        />
      </div>
      <div class="filter-item">
        Popular
        <div class="price-icon">
          <i class="iconfont icon-xia shang-price"></i
          ><i class="iconfont icon-xia"></i>
        </div>
      </div>
      <div class="filter-item">
        Price
        <div class="price-icon">
          <i class="iconfont icon-xia shang-price"></i
          ><i class="iconfont icon-xia"></i>
        </div>
      </div>
    </div>

    <div class="box-list">
      <div
        class="box-item box-item-hidden"
        v-for="(item, index) in goods"
        :key="index"
        @click="gotoDetail(item)"
      >
        <img
          v-if="item.isShow"
          class="box-hot-small"
          src="/static/img/box/hot.gif"
          draggable="false"
        /><img class="box-cover" :src="item.img" draggable="false" />
        <div class="box-name u-line-1">{{ item.name }}</div>
        <div class="box-num">
          <span class="box-num-label">Week Sales：</span
          ><span class="u-count-num">{{ item.weekSales }}</span>
        </div>
        <div class="box-bottom is--dark">
          <div class="box-bottom-line"></div>
          <div
            class="box-bottom-price bc-0"
            :style="{ background: item.color }"
          >
            <div class="bottom-price-unbox">UNBOX</div>
            <div class="bottom-price-text">${{ item.price }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="load-more" v-if="goods.length < total" @click="getData">
      LOAD MORE
    </div>

    <div class="home-title-row">
      <div class="home-title-left"></div>
      <div class="home-title-content">Watch our Unboxing</div>
      <div class="home-title-right"></div>
    </div>

    <div class="unbox-card-content">
      <div class="uni-scroll-view">
        <div class="uni-scroll-view" style="overflow: auto hidden">
          <div class="uni-scroll-view-content">
            <!---->
            <div class="unbox-card-list">
              <div
                class="unbox-card"
                v-for="(item, index) in [1, 2, 3, 4, 5]"
                :key="index"
              >
                <div class="list-item">
                  <div class="list-head">
                    <img
                      src="https://img.fcgbox.com/storage/uploads/2022/10/274153/pP5GIu9KVdER5oJSFY8lBRYVDzvCpWtwQuXnc3vN.webp"
                      alt=""
                      class="list-head-img"
                    />
                    <div class="list-head-mask"></div>
                    <div class="box-bc"></div>
                    <img
                      src="https://img.fcgbox.com/copy/box/102.webp"
                      alt=""
                      class="box-img"
                    />
                  </div>
                  <div class="list-name color-1">cool black sony soundbar</div>
                  <div class="list-tip u-line-2">
                    The material is good, the matte texture, the best thing is
                    that it supports Dolby full sound, other functions are also
                    readily available
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footerContent />
  </div>
</template>

<script>
import footerContent from "@/components/footerContent";
export default {
  name: "tab-box",
  data() {
    return {
      images: [
        "/static/img/box/sw1.png",
        "/static/img/box/sw2.png",
        "/static/img/box/sw3.png",
      ],
      params: {
        PageIndex: 1,
        PageSize: 4,
        AnyWhere: "",
      },
      total: 0,
      goods: [],
      listData: [
        {
          title: "无缝滚动第一行无缝滚动第一行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第二行无缝滚动第二行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第三行无缝滚动第三行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第四行无缝滚动第四行",
          date: "2017-12-16",
        },
        {
          title: "无缝滚动第五行无缝滚动第五行",
          date: "2017-12-16",
        },
      ],
    };
  },
  components: {
    footerContent,
  },
  computed: {
    optionStep() {
      return {
        step: 0.5,
      };
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    search() {
      this.params.PageIndex = 1;
      this.goods = [];
      this.getData();
    },
    gotoDetail(item) {
      this.$router.push({
        name: "boxDetail",
        query: {
          id: item.id,
        },
      });
    },
    getData() {
      this._showLoading();
      this.$http
        .get(`api/v1/box`, { params: this.params })
        .then(async (res) => {
          this._dismissLoading();
          if (res.data && res.data.isSuccess) {
            if (res.data.resultData.length) {
              this.goods = [...this.goods, ...res.data.resultData];
              this.total = res.data.total;
              this.params.PageIndex += 1;
            }
          }
        })
        .catch((err) => {
          this._dismissLoading();
          this._showToast(err.message);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  .load-more {
    width: 351px;
    height: 36px;
    background: linear-gradient(98deg, #f48836, #f4364c 100%);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 13px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
  }

  color: var(--text-color);
  background-image: url(/static/img/box/top_bc_home.webp);
  background-attachment: fixed;
  .top-sub {
    height: 11px;
    width: 100%;
  }
  .active-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 11px;
    padding: 0 3px;
    box-sizing: border-box;
    .active-item {
      flex: 1;
      height: 71px;
      margin: 0 3px;
      border-radius: 4px;
      background: var(--content-bc);
      -webkit-backdrop-filter: blur(11px);
      backdrop-filter: blur(11px);
      padding: 11px 6px;
      box-sizing: border-box;
      position: relative;
      .active-item-title {
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 700;
      }
      .active-item-text {
        width: 88px;
        font-size: 12px;
        opacity: 0.7;
      }
      .active-img {
        position: absolute;
        bottom: 2px;
        right: 3px;
        width: 39px;
        height: 39px;
      }
    }
  }
  .notice-body {
    margin-top: 11px;
    width: 100%;
    height: 143px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 13px;
    box-sizing: border-box;
    .uni-swiper-wrapper {
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 100%;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      .uni-swiper-slides {
        height: 143px;
        width: 215px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        .item {
          .user-avatar {
            width: 30px;
            height: 30px;
            flex-shrink: 0;
            position: absolute;
            left: 0;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            margin-left: 11px;
          }
          .notice-row-good {
            width: 26px;
            height: 26px;
            position: absolute;
            top: 50%;
            right: 6px;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            border: 2px solid;
            border-radius: 100%;
          }
          .notice-row {
            margin-bottom: 9px;
            width: 100%;
            height: 27px;
            border-radius: 27px;
            background: linear-gradient(
              90deg,
              hsla(0, 0%, 100%, 0.4),
              hsla(0, 0%, 100%, 0)
            );
            -webkit-backdrop-filter: blur(13px);
            backdrop-filter: blur(13px);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 13px;
            padding-right: 49px;
            box-sizing: border-box;
            position: relative;
            .notice-row-name {
              margin-right: auto;
              margin-left: 37px;
            }
            .notice-row-text {
              margin-left: 5px;
              color: var(--text-color);
            }
          }
        }
      }
    }
    .notice-swiper-right {
      width: 149px;
      // height: 146px;
    }
  }
  .try-play {
    width: 397px;
    height: 54px;
    background-color: var(--content-bc);
    margin-left: auto;
    margin-right: auto;
    margin-top: 11px;
    padding: 0 11px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .try-play-icon {
      width: 44px;
      // height: 44px;
      margin-right: 11px;
    }
    .try-play-title {
      font-size: 15px;
    }
    .try-play-text {
      font-size: 13px;
      opacity: 0.6;
    }
    .try-btn {
      width: 88px;
      height: 33px;
      border-radius: 33px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 13px;
      margin-left: auto;
      background: rgba(54, 101, 208, 0.3);
      color: #3665d0;
    }
  }
  .classify-content {
    width: 100%;
    height: 55px;
    background-color: var(--content-bc);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 11px;
    margin-top: 11px;
    position: -webkit-sticky;
    position: sticky;
    padding: 0 11px;
    box-sizing: border-box;
    .u-search {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex: 1;
    }
    .filter-item {
      padding: 0 11px;
      height: 33px;
      margin-left: 11px;
      border: 1px solid #999;
      border-radius: 4px;
      font-weight: 200;
      font-size: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .box-list {
    width: 100%;
    padding: 5px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    .box-item {
      /* width: 204px; */
      background: var(--content-bc);
      margin-bottom: 5px;
      padding: 11px;
      box-sizing: border-box;
      position: relative;
      width: 49%;
      .box-hot-small {
        width: 88px;
        height: 77px;
        position: absolute;
        top: -5px;
        right: -5px;
        z-index: 9;
      }
      .box-cover {
        width: 143px;
        height: 143px;
        -webkit-transform: scale(1);
        transform: scale(1);
        display: block;
        margin: auto;
      }
      .box-name {
        font-size: 16px;
        text-align: center;
        font-weight: 500;
        margin-top: 6px;
        margin-bottom: 6px;
      }
      .box-num {
        font-size: 13px;
        color: #00dcab;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        .box-num-label {
          color: #999;
        }
      }

      .box-bottom {
        width: 100%;
        height: 36px;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        position: relative;
        overflow: hidden;
        margin-top: 5px;
        .box-bottom-line {
          position: absolute;
          width: 55px;
          height: 110px;
          left: 0;
          z-index: 5;
          background: linear-gradient(
            90deg,
            var(--line-o),
            var(--line-bc),
            var(--line-o)
          );
          -webkit-animation: but_line-data-v-caca134e 2.5s linear infinite;
          animation: but_line-data-v-caca134e 2.5s linear infinite;
        }
        .box-bottom-price {
          width: 77px;
          flex: 1;
          height: 100%;
          border-radius: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: 700;
          color: #fff;
          .bottom-price-unbox {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #000;
            font-weight: 400;
          }
          .bottom-price-text {
            width: 88px;
            height: 27px;
            background-color: #fff;
            color: #000;
            display: flex;
            font-size: 15px;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            margin-right: 4px;
            font-family: Roboto;
          }
        }
        .bc-0 {
          background-color: #f34747;
        }
      }
    }
    .box-item-hidden {
      overflow: hidden;
    }
  }
  .home-title-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    padding: 0 !important;
    .home-title-left {
      background: linear-gradient(90deg, transparent, #8f65ed);
      flex: 1;
      height: 1px;
      position: relative;
    }
    .home-title-left::before {
      content: "";
      width: 10px;
      height: 10px;
      background-color: #8f65ed;
      position: absolute;
      right: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    .home-title-content {
      width: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 20px;
      font-weight: 900;
      line-height: 28px;
      letter-spacing: 0.436364px;
      margin: 0;
    }
    .home-title-right::before {
      content: "";
      width: 10px;
      height: 10px;
      background-color: #8f65ed;
      position: absolute;
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    .home-title-right {
      background: linear-gradient(-90deg, transparent, #8f65ed);
      flex: 1;
      height: 1px;
      position: relative;
    }
    .home-title-right::before {
      content: "";
      width: 10px;
      height: 10px;
      background-color: #8f65ed;
      position: absolute;
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }
  }
  .unbox-card-content {
    width: 100%;
    height: 287px;
    margin-bottom: 22px;
    .uni-scroll-view {
      position: relative;
      -webkit-overflow-scrolling: touch;
      max-height: inherit;
    }
    .uni-scroll-view,
    .uni-scroll-view-content {
      width: 100%;
      height: 100%;
      .unbox-card-list {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 11px;
        box-sizing: border-box;
        .unbox-card {
          width: 231px;
          height: 253px;
          flex-shrink: 0;
          margin-right: 11px;
          .list-item {
            margin-bottom: 10px;
            width: 100%;
            height: 260px;
            padding: 10px;
            height: 264px;
            box-sizing: border-box;
            border-radius: 4px;
            cursor: pointer;
            background-color: var(--content-bc);
            .list-head {
              width: 100%;
              height: 160px;
              border-radius: 4px;
              overflow: hidden;
              position: relative;
              .box-bc {
                width: 50px;
                height: 50px;
                position: absolute;
                bottom: 4px;
                right: 4px;
                -webkit-filter: blur(10px);
                filter: blur(10px);
                z-index: 1;
                background-image: linear-gradient(
                  320deg,
                  #4ec1e3 104%,
                  rgba(78, 193, 227, 0) 0
                );
              }
              .box-img {
                width: 50px;
                height: 50px;
                position: absolute;
                bottom: 4px;
                right: 4px;
                z-index: 2;
              }
            }
            .color-1 {
              color: #9d63d2;
            }
            .list-tip {
              font-size: 12px;
              color: #6e6e6e;
              text-align: center;
            }
            .u-line-2 {
              display: -webkit-box !important;
              overflow: hidden;
              text-overflow: ellipsis;
              word-break: break-all;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical !important;
            }
            .list-name {
              max-width: 120px;
              font-size: 12px;
              text-align: center;
              font-size: 14px;
              margin-top: 12px;
              margin-left: auto;
              margin-right: auto;
              font-weight: 500;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .list-head-img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            .list-head-mask {
              position: absolute;
              z-index: 3;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(0, 0, 0, 0.5);
              display: flex;
              justify-content: center;
              align-items: center;
              opacity: 0;
              transition: 0.2s;
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss" >
.box {
  .van-swipe {
    img {
      height: 150px !important;
      width: 100% !important;
    }
  }
  .van-search {
    background-color: var(--content-bc);
  }
  .van-search__content {
    background-color: var(--content-bc);
    border-radius: 100px;
    border: 1px;
    border-color: rgb(153, 153, 153);
    border-radius: 1px solid red;
    border: 1px solid rgb(153, 153, 153);
  }
  .van-field__left-icon .van-icon,
  .van-field__right-icon .van-icon {
    color: var(--text-color);
  }
}
</style>